<template>
    <div class="app">
      <div class="imgs" @click="$emit('like',obj.dogName)">
        <!-- 动态加: -->
        <img :src="obj.dogImgUrl" alt="" />
        <h3 :style="{ backgroundColor: color }" @click.stop="fn">
          {{ obj.dogName }}
        </h3>
      </div>
  </div>
</template>

<script>
export default {
  // props: ["imgurl", "dogname"],
  props: {
    obj:{
      type:Object,
      required:true
    }
  },
  data() {
    return {
      color: "",
    };
  },

  created() {},

  methods: {
    fn() {
      this.color = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;
      // 触发父级事件
      // this.$emit('LikeAdd',this.dogname)
    },
    
  },
};
</script>

<style scoped>
.app {
  width: 200px;
  border: 1px solid black;
  text-align: center;
  float: left;
}
.app img {
  width: 100%;
  height: 150px;
}
.box{
  float: right;
}
</style>
